/*bg-image($url)
  background-image url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5)
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
    background-image url($url + "@3x.png")*/
yellowColor = #cb934b
bordercolor = 1px solid #e5e5e5
redColor = #ff5a00
bgColor = #f2f1ef
cal(width)
  width / 75

setFontsize($size)
  font-size $size

setFlex($justify, $align)
  display flex
  justify-content $justify
  align-items $align

scrollBody()
  overflow-y scroll

setIcon($url, $width, $height)
  background-image url($url)
  background-repeat no-repeat
  background-size 100%
  vertical-align middle
  width cal($width) rem
  height cal($height) rem

html, body
  background bgColor

.text-center
  text-align center

.blackbg
  position fixed
  left 0
  top 0
  width 100%
  height 100vh
  z-index 100
  background-color rgba(0, 0, 0, 0.5)

button
  padding 0
  &.custom
    height cal(88) rem
    min-height auto
    border none
    border-radius 3px
    background #cb934b !important
    color #fff
    setFontsize(18px)

/*Alert弹框样式*/
.modal.minimized .modal-content
  width cal(540) rem
  min-height cal(280) rem
  max-width auto
  max-height auto
  border-radius 10px

.modal-header
  setFontsize(18px)
  line-height cal(120) rem
  color #333
  padding 0
  text-align center

.modal-body
  setFontsize(14px)
  text-align center
  color #999
  padding 0
  overflow hidden
  margin-bottom cal(45) rem

.modal-buttons
  padding 0
  border-top bordercolor
  button
    setFontsize(18px)
    width 100%
    height cal(85) rem
    &.primary.clear:active
      background #fff !important

/*重新定义tab样式*/
.q-tabs
  font-size 14px
  .left-scroll, .right-scroll
    font-size 14px

/* 重新定义无限加载样式 */
.q-infinite-scroll-message
  text-align center

/* 重新定义button样式 */
button
  min-height auto

/* 重新定义swipe样式 */
.drawer-content
  width 100%

.q-slider-track > div.centered
  padding 0
  margin 0

.q-slider-toolbar .q-slider-dots i
  font-size 14px
  color #cb934b

.q-slider-toolbar
  bottom 0.8rem
  padding 0

.q-slider-toolbar .items-center i
  display none

.q-slider-toolbar i span, .q-slider-left-button i, .q-slider-right-button
  display none

.q-slider-track.with-toolbar > div
  padding-bottom 0

/*从底部显示样式*/
.slideFromBottom-enter-active {
  transition all 0.3s ease-in
}

.slideFromBottom-leave-active {
  transition all 0.3s ease-in
}

.slideFromBottom-enter, .slideFromBottom-leave-to {
  will-change transform
  -webkit-transform translateY(101%)
  transform translateY(101%)
}

.fade-enter-active {
  transition all 0.1s ease-in
}

.fade-leave-active {
  transition all 0.1s ease-in
}

.fade-enter, .fade-leave-to {
  will-change opacity
  opacity 1
}

/*重置toggle样式*/
.q-toggle div:after, .q-toggle div:before {
  border-radius 2px
}

.q-toggle div:after {
  width cal(34) rem
  height cal(34) rem
  box-shadow none
}

.q-toggle div:before {
  width cal(80) rem
  height cal(40) rem
  top cal(-3) rem
}

.q-toggle input:checked + div:before {
  background yellowColor
  left auto
  right 0
}

.q-toggle input:checked + div:after {
  background #fff
  transform translateX(0.5rem)
  -webkit-transform translateX(0.5rem)
}

/*iCON*/
.icon
  width cal(49) rem
  height cal(49) rem
  vertical-align middle
  display inline-block
  background-repeat no-repeat
  background-image url("/static/loginIcon_03.png")
  background-size 100%
  &.icon-arrow
    background-position 0 -6.5rem

/*页面固底部*/
footer
  text-align center
  position fixed
  bottom 0
  width 100%
  font-size 15px
  border-top 1px solid #e5e5e5
  background #fff
  .align-self
    flex 1 1 auto
    line-height cal(88) rem
    &.f1, &.f2
      border-right bordercolor
    &.f3
      background yellowColor
      color #fff

.q-radio input:checked + div:before
  border-color yellowColor

.q-radio input:checked + div:after
  background yellowColor
